<template>
  <div class="outer">
    <div class="top-title">
      <span>{{localQuestion.title}}</span>
      <el-tag type="danger" v-if="localQuestion.must">(必做)</el-tag>
    </div>
    <div class="question">{{localQuestion.description}}</div>
    <div style="display:flex">
      <el-input v-for="(item,index) in localQuestion.options" :key="index" style="margin:10px;width:30%"
        @change="handleChange($event,index)" v-model="localModel[index]" clearable>
      </el-input>
    </div>
  </div>
</template>

<script>
export default {
  name: "QitemTextBlank",
  props: {
    question: {
      type: Object,
      default: function() {
        return {
          key: 3,
          order: 3,
          type: "blank",
          must: true,
          title: "填空题",
          description: "i am ____ ques ____",
          options: ["xxx", "xxx"]
        };
      }
    }
  },
  data() {
    return {
      localQuestion: this.question,
      localModel: []
    };
  },
  methods: {
    checkAnswer() {
      if (this.localQuestion.must == false) return true;
      if (this.localModel.length < this.localQuestion.options.length)
        return false;
      for (let item of this.localModel) {
        if (item == "") return false;
      }
      return true;
    },
    handleChange(value, index) {
      // 新的值以及该值对应的空
      this.$emit("change", { value, index, type: this.localQuestion.type });
    }
  },
  mounted() {
    console.log(this.question);
  }
};
</script>

<style scoped>
.el-tag.el-tag--danger {
  background-color: transparent;
  border: none;
  text-align: left;
}
.outer {
  width: 100%;
  /* background-color: aqua; */
}
.top-title {
  width: 100%;
  line-height: 32px;
  display: inline-block;
  text-align: left;
  padding: 0 0 0px 10px;
  font-weight: 700;
  box-sizing: border-box;
}
.question {
  width: 100%;
  /* background-color: turquoise; */
  text-align: left;
  padding-left: 10px;
  margin: 10px auto;
  margin-top: 3px;
  box-sizing: border-box;
}
</style>